<template>
  <div>

    <!-- 面板 -->
    <el-table height="550px" ref="powerListRef" :data="powerList" style="width: 100%" stripe>
      <el-table-column type="index" label="#">
      </el-table-column>
      <el-table-column prop="authName" label="权限名称">
      </el-table-column>
      <el-table-column prop="path" label="权限路径">
      </el-table-column>
      <el-table-column prop="level" label="权限等级" :filters="[{ text: '一级', value: '0' }, { text: '二级', value: '1' }, { text: '三级', value: '2' }]" :filter-method="filterTag" filter-placement="right">>
        <template slot-scope="scope">
          <el-tag :type="scope.row.level|tagType" disable-transitions>{{scope.row.level|levelMseeage}}</el-tag>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { getPowerListAPI } from '@/api/powerAPI'
export default {
  name: 'powerList',
  data() {
    return {
      powerList: []
    }
  },
  methods: {
    async getPowerList() {
      const { data: res } = await getPowerListAPI('list')
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.powerList = res.data
      console.log(res)
    },
    filterTag(value, row) {
      return row.level === value
    }
  },
  filters: {
    levelMseeage(level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else if (level === '2') {
        return '三级'
      }
    },
    tagType(level) {
      if (level === '0') {
        return 'primary'
      } else if (level === '1') {
        return 'success'
      } else if (level === '2') {
        return 'warning'
      }
    }
  },
  created() {
    this.getPowerList()
  }
}
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 15px;
}
</style>
